// 家庭媒体管理系统 - SCSS变量定义
// 基于现代化UI设计系统

// ================================
// 色彩系统变量
// ================================

// 品牌主色 - 现代蓝紫渐变
$primary-50: #f0f4ff;
$primary-100: #e0e7ff;  
$primary-200: #c7d2fe;
$primary-300: #a5b4fc;
$primary-400: #818cf8;
$primary-500: #6366f1;  // 主要品牌色
$primary-600: #4f46e5;
$primary-700: #4338ca;
$primary-800: #3730a3;
$primary-900: #312e81;

// 次要品牌色 - 现代粉紫渐变
$secondary-50: #fdf2f8;
$secondary-100: #fce7f3;
$secondary-200: #fbcfe8;
$secondary-300: #f9a8d4;
$secondary-400: #f472b6;
$secondary-500: #ec4899;  // 次要品牌色
$secondary-600: #db2777;
$secondary-700: #be185d;
$secondary-800: #9d174d;
$secondary-900: #831843;

// 现代渐变色
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
$gradient-warm: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
$gradient-cool: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
$gradient-sunset: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);

// 动态光影渐变
$gradient-glass: linear-gradient(135deg, 
  rgba(255, 255, 255, 0.25) 0%,
  rgba(255, 255, 255, 0.10) 100%);

// 霓虹色彩系统
$neon-blue: #00d4ff;
$neon-purple: #b347d9;
$neon-pink: #ff006e;
$neon-green: #39ff14;
$neon-orange: #ff9500;

// 功能状态色
$success: #10b981;     // 成功 - 现代绿
$warning: #f59e0b;     // 警告 - 活力橙  
$error: #ef4444;       // 错误 - 优雅红
$info: #3b82f6;        // 信息 - 智能蓝

// 媒体类型专属色
$media-photo: #ec4899;    // 照片 - 温暖粉
$media-video: #8b5cf6;    // 视频 - 动感紫
$media-audio: #06b6d4;    // 音频 - 清新青
$media-document: #84cc16; // 文档 - 自然绿

// 中性色阶
$gray-50: #f9fafb;
$gray-100: #f3f4f6;
$gray-200: #e5e7eb;
$gray-300: #d1d5db;
$gray-400: #9ca3af;
$gray-500: #6b7280;
$gray-600: #4b5563;
$gray-700: #374151;
$gray-800: #1f2937;
$gray-900: #111827;

// 暗色主题色彩
$dark-bg-primary: #0f0f23;
$dark-bg-secondary: #16213e;
$dark-bg-tertiary: #1a2332;
$dark-surface: #252d3f;
$dark-surface-hover: #2d3548;

// 暗色模式渐变
$dark-gradient-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
$dark-gradient-accent: linear-gradient(135deg, #0f3460 0%, #0f4c75 100%);

// 暗色玻璃效果
$dark-glass: rgba(255, 255, 255, 0.05);
$dark-glass-border: rgba(255, 255, 255, 0.08);

// ================================
// 字体系统变量
// ================================

// 字体族定义
$font-family-primary: 'Inter', 'SF Pro Display', 'Helvetica Neue', 'Arial', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
$font-family-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Cascadia Code', 'Fira Code', monospace;
$font-family-display: 'SF Pro Display', 'Inter', sans-serif;

// 字体大小与层次
$font-size-xs: 0.75rem;     // 12px - 标签、辅助信息
$font-size-sm: 0.875rem;    // 14px - 次要文本
$font-size-base: 1rem;      // 16px - 正文
$font-size-md: 1.0625rem;   // 17px - 中等文本
$font-size-lg: 1.125rem;    // 18px - 小标题
$font-size-xl: 1.25rem;     // 20px - 标题
$font-size-2xl: 1.5rem;     // 24px - 大标题
$font-size-3xl: 1.875rem;   // 30px - 页面标题
$font-size-4xl: 2.25rem;    // 36px - 主标题
$font-size-5xl: 3rem;       // 48px - 超大标题
$font-size-6xl: 3.75rem;    // 60px - 展示标题

// 字体权重系统
$font-weight-thin: 100;
$font-weight-extralight: 200;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extrabold: 800;
$font-weight-black: 900;

// ================================
// 空间系统变量
// ================================

// 基于8px网格系统的现代间距
$spacing-0: 0;
$spacing-px: 1px;
$spacing-0_5: 0.125rem;  // 2px
$spacing-1: 0.25rem;     // 4px
$spacing-1_5: 0.375rem;  // 6px
$spacing-2: 0.5rem;      // 8px
$spacing-2_5: 0.625rem;  // 10px
$spacing-3: 0.75rem;     // 12px
$spacing-3_5: 0.875rem;  // 14px
$spacing-4: 1rem;        // 16px
$spacing-5: 1.25rem;     // 20px
$spacing-6: 1.5rem;      // 24px
$spacing-7: 1.75rem;     // 28px
$spacing-8: 2rem;        // 32px
$spacing-9: 2.25rem;     // 36px
$spacing-10: 2.5rem;     // 40px
$spacing-11: 2.75rem;    // 44px
$spacing-12: 3rem;       // 48px
$spacing-14: 3.5rem;     // 56px
$spacing-16: 4rem;       // 64px
$spacing-20: 5rem;       // 80px
$spacing-24: 6rem;       // 96px
$spacing-28: 7rem;       // 112px
$spacing-32: 8rem;       // 128px

// ================================
// 圆角系统变量
// ================================

// 现代圆角层次系统
$radius-none: 0;
$radius-sm: 0.125rem;     // 2px - 小元素
$radius-base: 0.25rem;    // 4px - 基础元素
$radius-md: 0.375rem;     // 6px - 中型元素
$radius-lg: 0.5rem;       // 8px - 卡片元素
$radius-xl: 0.75rem;      // 12px - 大型元素
$radius-2xl: 1rem;        // 16px - 容器元素
$radius-3xl: 1.5rem;      // 24px - 特大元素
$radius-full: 9999px;     // 完全圆角

// ================================
// 阴影系统变量
// ================================

// 分层阴影系统 - 营造深度感
$shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
$shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
$shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
$shadow-2xl: 0 50px 100px -20px rgba(0, 0, 0, 0.25);
$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

// 现代发光效果
$glow-primary: 0 0 20px rgba(99, 102, 241, 0.4);
$glow-secondary: 0 0 20px rgba(236, 72, 153, 0.4);
$glow-success: 0 0 20px rgba(16, 185, 129, 0.4);
$glow-warning: 0 0 20px rgba(245, 158, 11, 0.4);
$glow-error: 0 0 20px rgba(239, 68, 68, 0.4);

// 霓虹发光效果
$neon-glow: 
  0 0 5px currentColor,
  0 0 10px currentColor,
  0 0 15px currentColor,
  0 0 20px currentColor;

// 玻璃态阴影
$shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
$shadow-glass-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);

// ================================
// 动画系统变量
// ================================

// 现代化缓动函数
$ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
$ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
$ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
$ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
$ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// 动画持续时间
$duration-fast: 0.15s;
$duration-normal: 0.3s;
$duration-slow: 0.5s;
$duration-slower: 0.8s;
$duration-slowest: 1.2s;

// ================================
// 响应式断点变量
// ================================

// 现代化断点系统
$breakpoint-xs: 475px;
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;
$breakpoint-xl: 1280px;
$breakpoint-2xl: 1536px;
$breakpoint-3xl: 1920px;

// ================================
// Z-index层级变量
// ================================

$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;
$z-index-toast: 1080;